@charset "utf-8";
@import './modules/header';
@import './modules/footer';
body{
    background-color: #f8f8f8;
}
// .name
.name{
    background-color: #fff;
    .name-con{
        width: 1230px;
        height: 100px;
        margin: 0 auto;
        padding-top: 25px;
        .left{
            height: 44px;
            float: left;
            .imgBox{
                width: 220px;
                height: 44px;
                float: left;
            }
            img{
                width: 220px;
                height: 44px;
                float: left;
            }
            h2{
                float: left;
                font-size: 26px;
                line-height: 10px;
                font-weight: bold;
            }
        }
        .right{
            width: 636px;
            height: 44px;
            border: 4px solid #ff5500;
            float: right;
            select{
                width: 94px;
                height: 36px;
                border: none;
                font-size: 14px;
                line-height: 36px;
                padding-left: 20px;
                color: #6b6b6b;
                background-color: #f5f5f5;
                float: left;
            }
            input{
                padding-left: 10px;
                width: 429px;
                height: 36px;
                border: none;
                border-left: 1px solid #e5e5e5;
                float: left;
            }
            .searchBtn{
                width: 105px;
                height: 36px;
                background-color: #ff5500;
                color: #fff;
                font-weight: bold;
                font-size: 22px;
                line-height: 36px;
                text-align: center;
                border: none;
                float: left;
            }
        }
    }
}
// .select
.select{
    .select-con{
        width: 1230px;
        height: 150px;
        margin: 0 auto;

        a{
            display: block;
            margin: 0 1px;
            width: 80px;
            height: 110px;
            float: left;
            background-color: #ccc;
            transition: all 0.3s;
            text-decoration: none;
            &:hover{
                text-decoration: none;
                transform: scale(1.4);
                box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
            }
            .imgBox{
                width: 76px;
                height: 76px;
                margin: 2px;
                background-color: #fff;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            p{
                font-size: 16px;
                color: #000;
                font-weight: bold;
                line-height: 30px;
                text-align: center;
            }
        }
    }
}
.boxShow{
    width: 100%;
    height: 20px;
    background-color: #fafafa;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.8);
}
// goodsList
.goodsList{
    background-color: #fafafa;
    .goodsList-con{
        width: 1230px;
        margin: 0 auto;
        padding-bottom: 20px;
        .sort{
            width: 1210px;
            height: 45px;
            border: 1px solid #eaeaea;
            background-color: #fff;
            margin: 0 auto;
            div{
                float: left;
                color: #000;
                height: 45px;
                padding: 0 25px;
                line-height: 45px;
                border-right: 1px solid #eaeaea;
                cursor: pointer;
            }
            .active{
                background-color: #f5f5f5;
                color: chocolate;
            }
        }
        ul{
            width: 1230px;
            display: flex;
            flex-wrap: wrap;
            li{
                a{
                    display: block;
                    width: 230px;
                    height: 332px;
                    background-color: #fff;
                    margin: 8px;
                    padding: 5px;
                    border-radius: 10px;
                    text-decoration: none;
                    &:hover{
                        padding: 3px;
                        border: 2px solid #ff5500;
                    }
                    &:hover em{
                        color: purple;
                    }
                    .imgBox{
                        width: 220px;
                        height: 220px;
                        border-radius: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                        }
                    }
                    .price{
                        height: 40px;
                        color: #ff5500;
                        line-height: 40px;
                        p{
                            font-size: 14px;
                            float: left;
                        }
                        i{
                            font-size: 20px;
                            float: left;
                        }
                    }
                    em{
                        display: block;
                        font-size: 14px;
                        line-height: 18px;
                        width: 200px;
                        color: #000;
                        text-indent: -1em;
                    }
                    span{
                        width: 230px;
                        font-size: 14px;
                        line-height: 30px;
                        color: #6b6b6b;
                    }
                }
            }
        }
    }
}
// page
.page-con{
    width: 1230px;
    height: 105px;
    margin: 10px auto;
    padding: 30px 27px 35px;
    ul{
        min-width: 680px;
        display: flex;
        justify-content: center;
        li{
            min-width: 30px;
            background-color: #fff;
            color: #222;
            border-radius: 4px;
            text-align: center;
            line-height: 40px;
            transition: all 0.2s;
            height: 40px;
            float: left;
            margin-right: 10px;
            a{
                display: block;
                border: 1px solid #ddd;
                height: 40px;
                border-radius: 4px;
                color: #222;
                text-decoration: none;
                padding: 0 14px;
                &:hover{
                    background-color: #ff4400;
                    color: #fff;
                    border: 1px solid #ff4400;
                }
            }
            .active{
                background-color: #ff4400;
                color: #fff;
                border: 1px solid #ff4400;
            }
            button{
                height: 40px;
                border: 1px solid #ddd;
                background-color: #fff;
                border-radius: 4px;
                color: #222;
                padding: 0 10px;
                &:hover{
                    background-color: #ff4400;
                    color: #fff;
                    border: 1px solid #ff4400;
                }
            }
            input{
                height: 40px;
                border-radius: 4px;
                color: #222;
                padding-left: 5px;
                border: 1px solid #ddd;
                width: 200px;
            }
        }
        .nue{
            background-color: #fff;
            border: none;
        }
    }
}